<template>
  <div class="data-item" v-for="(item, index) in paramsList.filter((item) => item.configCategory == activeKey)"
    :key="item.description" :style="{ width: item.children.length ? '100%' : '' }">
    <a-form-item :label="item.description" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-popover title="操作" placement="topLeft">
        <div class="params_div" v-if="!item.children.length">
          <!-- <component :is="rwSelect"></component> -->
          <rwDictSelect v-if="item.componentType === 'dictSelect'" :code="item.componentDefaultValue"
            @change="setDictInfo($event, item)" :value="item.value ? (item.value.split && item.value.split(',')) : ''"
            mode="multiple" />

          <div class="image" v-else-if="item.componentType === 'rwUpload'">
            <rwUpload :value="item.value" @change="setImginfo($event, item)" />
          </div>
          <a-input v-model:value="item.value" @blur="setInfo(item)" v-else />
        </div>
        <template #content>
          <a-button shape="circle" danger :icon="h(DeleteOutlined)" @click="delParams(item)" style="margin-left: 20px" />
          <a-button shape="circle" class="plus" :icon="h(EditOutlined)" @click="editParams(item)"
            style="margin-left: 20px" />

          <a-button class="plus" shape="circle" :icon="h(PlusOutlined)" @click="plusClick(item)"
            style="margin-left: 20px" />
        </template>
      </a-popover>
      <div class="children" v-if="item.children.length">
        <div class="cld_content" v-if="item.dataType == 2">
          <div class="cldc_p" v-for="x in item.childrens" :key="x">
            <dataItem class="form-item" :paramsList="x" :parent="item" :index="index" :activeKey="activeKey"
              @item-click="plusClick" @item-del="delParams" @item-set-info="setInfo" @item-set="setInfo"
              @item-edit="editParams" />
            <a-button shape="circle" :icon="h(CopyOutlined)" @click="copyChildren(x, item)" class="copy_btn"
              style="margin-left: 20px" />
          </div>
        </div>
        <div class="cld-content" v-else>
          <dataItem class="form-item" :paramsList="item.children" :parent="item" :index="index" :activeKey="activeKey"
            @item-click="plusClick" @item-del="delParams" @item-set-info="setInfo" @item-set="setInfo"
            @item-edit="editParams" :labelCol="{ span: 3 }" :wrapperCol="{ span: 22 }" />
        </div>
        <div class="copy_button">
          <a-button class="plus" shape="circle" :icon="h(PlusOutlined)" @click="plusClick(item)"
            style="margin-left: 20px" />
          <a-button shape="circle" class="plus" :icon="h(EditOutlined)" @click="editParams(item)"
            style="margin-left: 20px" />
          <a-button shape="circle" danger :icon="h(DeleteOutlined)" @click="delParams(item.children)"
            style="margin-left: 20px" />
          <a-button shape="circle" class="plus" :icon="h(BlockOutlined)" @click="setParams(item)"
            style="margin-left: 20px" />
        </div>
      </div>
    </a-form-item>
  </div>
</template>

<script lang="ts">
import { defineComponent, h, toRefs, watch } from 'vue';
import rwDictSelect from '@/components/rw/dictSelect.vue';
import rwSelect from '@/components/rw/orgSelect.vue';
import rwUpload from '@/components/rw/upload.vue';
import {
  PlusOutlined,
  DeleteOutlined,
  BlockOutlined,
  CopyOutlined,
  EditOutlined,
} from '@ant-design/icons-vue';

export default defineComponent({
  name: 'DataItem',
  components: { rwDictSelect, rwUpload },
  props: {
    paramsList: {
      type: Array<any>,
      default: () => [],
    },
    labelCol: {
      type: Object,
      default: () => { },
    },
    wrapperCol: {
      type: Object,
      default: () => { },
    },
    parent: {
      type: Object,
      default: () => { },
    },
    activeKey: {
      type: String,
      default: 'Ui',
    },
    index: {
      type: Number,
      default: 1,
    },
  },
  setup(props, context) {
    const { paramsList, wrapperCol, labelCol, parent } = toRefs(props);
    function plusClick(item) {
      context.emit('item-click', item);
    }
    function setInfo(item) {
      context.emit('item-setInfo', item);
    }
    function setImginfo(value, item) {
      item.value = value;
      context.emit('item-setInfo', item);
    }
    function setDictInfo(e, item) {
      item.dataType = item.dataType == 0 ? 1 : item.dataType;
      item.value = e.join(',');
      context.emit('item-setInfo', item);
    }
    function delParams(item) {
      context.emit('item-del', item);
    }
    function setParams(item) {
      item.dataType = item.dataType == 2 ? 1 : 2;

      let ids = item.children.filter((x) => x.index !== 0);

      context.emit('item-set', item);

      if (ids.length && item.dataType == 1) {
        ids && context.emit('item-del', ids, '转回对象以后会删除追加的数组，确定转回吗？');
      }
    }
    function editParams(item) {
      context.emit('item-edit', item);
    }
    function changeUpload(item) {
      context.emit('item-del', item);
    }

    function copyChildren(n, item) {
      let func = (children) => {
        children.forEach((x) => {
          delete x.id;
          x.children && func(x.children);
        });
      };
      let index = item.children[item.children.length - 1].index + 1;
      n = [
        ...n.map((x, i) => {
          delete x.id;
          func(x.children);
          return {
            ...x,
            key: x.key + i || x.link,
            index,
          };
        }),
      ];

      context.emit('item-setInfo', n);
      if (item.dataType !== 2) {
        item.dataType = 2;
        context.emit('item-set', item);
      }
    }

    return {
      rwSelect,
      h,
      plusClick,
      setInfo,
      setImginfo,
      setDictInfo,
      delParams,
      changeUpload,
      setParams,
      copyChildren,
      editParams,
      parent,
      EditOutlined,
      CopyOutlined,
      BlockOutlined,
      DeleteOutlined,
      PlusOutlined,
      paramsList,
      wrapperCol,
      labelCol,
    };
  },
});
</script>
<style>
.data-item .ant-input {
  max-width: 300px !important;
}

.data-item .ant-select {
  max-width: 300px !important;
}
</style>
<style lang="less" scoped>
.children {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  position: relative;

  .cld_content {
    display: flex;
    overflow-y: auto;
    max-width: 3000px;
  }

  .cld-content {
    flex: 1;
  }

  .cldc_p {
    border-right: 1px dashed #ddd;
    padding: 0 20px;
    position: relative;

    .copy_btn {
      position: absolute;
      right: -5%;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .copy_button {
    position: absolute;
    top: 0%;
    transform: translateY(-50%);
  }
}

.data-item {
  margin: 30px 0;
  min-width: 300px;

  .ant-form-item {
    margin-bottom: 0;
    margin: 5px;
  }
}

.params_div {
  display: flex;

  .plus {
    opacity: 0;
    transition: all 0.3s ease;
  }

  &:hover {
    .plus {
      opacity: 1 !important;
    }
  }
}
</style>
